<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogFormVisible"
    width="36%"
    @close="clean"
    top="1%">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="明细添加" name="itemAdd" :disabled="itemAddHidden">
        <el-form :model="orderItemForm" ref="orderItemForm" :rules="orderItemFormRules">
          <el-form-item label="使用配件" label-width="120px" prop="stockName">
            <el-autocomplete
              size="medium"
              v-model="state"
              :fetch-suggestions="querySearchAsync"
              placeholder="请选择或输入服务"
              @select="handleSelect"
              style="width: 389px"
            />
          </el-form-item>
          <el-form-item label="使用数量" label-width="120px" prop="stockNum">
            <el-input v-model="orderItemForm.stockNum" autocomplete="off"/>
          </el-form-item>
          <el-form-item label="检测问题" label-width="120px" prop="description">
            <el-input v-model="orderItemForm.description" autocomplete="off"/>
          </el-form-item>
        </el-form>
        <el-form>
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="onSubmit">确 定</el-button>
        </el-form>

      </el-tab-pane>
      <el-tab-pane label="详情展示" name="itemDetail">
        <el-table
          :data="tableData"
          style="width: 100%">
          <el-table-column
            prop="description"
            label="问题描述"
            show-overflow-tooltip
            width="150"/>
          <el-table-column
            prop="stockName"
            label="配件名称"
            width="150"/>
          <el-table-column
            prop="stockNum"
            label="使用数量"
            width="120"/>
          <el-table-column
            prop="price"
            label="金额"
            width="120"/>
          <el-table-column
            fixed="right"
            label="操作"
            width="100">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="itemDetailDelete(scope.row)" :disabled="candelete">删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--        <el-form>
                  <el-button type="primary" @click="confirmItem" :disabled="confirmItemSubmit">提交</el-button>
                </el-form>-->
      </el-tab-pane>
    </el-tabs>

  </el-dialog>
</template>

<script>
export default {
  name: "ItemDetail",
  data() {
    return {
      orderItemForm: {
        orderId: '',
        stockName: '',
        stockNum: '',
        description: '',
      },
      restaurants: [],
      state: '',
      timeout: null,
      dialogFormVisible: false,
      title: '',
      result: [],
      orderItemFormRules: {
        stockName: [{
          required: true, message: '请选择/输入服务', trigger: 'blur'
        }],
        stockNum: [{
          required: true, message: '请输入使用数量', trigger: 'blur'
        }]
      },
      order: '',
      activeName: 'itemAdd',
      tableData: [],
      stockId: '',
      confirmItemSubmit: false,
      candelete: false,
      itemAddHidden: false,// 增加页面隐藏
      url: {
        details: "/orders/item/details",
        stockContent: "/content/stock/stockList",
        save: "/orders/item/put",
        delete: "/orders/item/delete",
        confirmItemDetail:"/orders/item/confirmItemDetail"
      }
    }
  },
  methods: {
    loadOrderItemDetail() {
      this.tableData = []
      this.$axios.post(this.url.details, this.order).then(resp => {
        if (resp.data.code === 200) {
          var result = resp.data.result
          for (let key = 0; key < result.length; key++) {
            this.tableData.push(result[key])
          }
        }
      })
    },
    // 查询配件/服务信息列表
    loadStockList() {
      var data = [{
        value: '',
        stockId: ''
      }]
      this.$axios.get(this.url.stockContent).then(resp => {
        var result = resp.data.result
        for (let key = 0; key < result.length; key++) {
          data.push({value: result[key].name, stockId: result[key].stockId})
        }
      })
      return data
    },
    querySearchAsync(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;

      clearTimeout(this.timeout);
      this.timeout = setTimeout(() => {
        cb(results);
      });
    },
    createStateFilter(queryString) {
      return (state) => {
        return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },
    // 选择服务配件
    handleSelect(item) {
      this.orderItemForm.stockName = item.value
      this.stockId = item.stockId
    },
    // 明细添加
    onSubmit() {
      this.$refs.orderItemForm.validate((valid) => {
        if (valid) {
          var data = Object.assign({}, this.orderItemForm)
          data.orderId = this.order.orderId
          data.stockId = this.stockId
          this.$axios.post(this.url.save, data).then(resp => {
            if (resp.data.code === 200) {
              this.$message({
                message: resp.data.result,
                type: "success"
              })
            }
            this.orderItemForm = {
              orderId: '',
              stockName: '',
              stockNum: '',
              description: '',
            }
            this.state = ''
            this.$emit("reload")
          })
        }
      })
    },
    // 删除订单明细
    itemDetailDelete(row) {
      this.$confirm("确定删除" + row.stockName + "信息吗？", "提示", {
        cancelButtonText: '取消',
        confirmButtonText: '确定',
        type: 'warning'
      }).then(() => {
        this.$axios.post(this.url.delete, row).then(resp => {
          console.log(resp.data)
          if (resp.data.code === 200) {
            this.$message({
              message: resp.data.result,
              type: "success"
            })
            this.loadOrderItemDetail()
          }
          if (resp.data.code === 400) {
            this.$message({
              message: resp.data.message,
              type: "warning"
            })
            this.loadOrderItemDetail()
          }
        })
      })
    },
    // 确认提交明细单
    confirmItem(order, orderItem) {
      this.confirmItemSubmit = false
      // 提交后修改订单状态，修改配件数量
      // 需要的数据：详情中的使用数量是个数组
      console.log(order)
      console.log(orderItem)
      if (order.status === 3) {
        this.$confirm('确定提交吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: "info"
        }).then(() => {
          this.$axios.post(this.url.confirmItemDetail, {
            order: order,
            orderItem: orderItem
          }).then(resp => {
            if (resp.data.code === 200) {
              this.$message({
                message: resp.data.result,
                type: "success"
              })
              this.candelete = true
              this.confirmItemSubmit = true
              this.$emit("reload")
            }
          })
        })
      }
    },
    // 点击切换标签页
    handleClick(tab, event) {
      // 当点击详情页的时候进行加载数据------优化空间：当数据无变动或者状态为结束时可存入redis中
      if (tab.name === "itemDetail") {
        this.loadOrderItemDetail()
      }
      /*if (this.order.status !== 3) { // 当订单状态
        this.confirmItemSubmit = true // 禁止提交
        this.candelete = true // 禁止删除
        this.itemAddHidden = true // 增加页禁用
      }*/
    },
    clean() {
      this.itemAddHidden = false
      this.candelete = false
      this.confirmItemSubmit = false
      this.activeName = 'itemAdd'
    }
  },
  mounted() {
    this.restaurants = this.loadStockList();
  }
};
</script>

<style scoped>

</style>
